<template>
  <div id="app" class="mobile-app">
    <header class="mobile-header">
      <h1>调度系统</h1>
      <div class="header-actions">
        <button class="icon-btn" @click="refresh">
          <span>🔄</span>
        </button>
        <button class="icon-btn" @click="showMenu = !showMenu">
          <span>☰</span>
        </button>
      </div>
    </header>
    
    <nav class="mobile-nav" v-if="showMenu">
      <a href="/index.html" class="nav-item">首页</a>
      <a href="/login.html" class="nav-item">登录</a>
      <a href="/admin.html" class="nav-item">管理后台</a>
    </nav>
    
    <main class="mobile-main">
      <div class="task-list">
        <h2>我的任务</h2>
        <div class="task-item" v-for="task in tasks" :key="task.id">
          <div class="task-header">
            <h3>{{ task.title }}</h3>
            <span class="task-status" :class="task.status">{{ task.statusText }}</span>
          </div>
          <p class="task-desc">{{ task.description }}</p>
          <div class="task-meta">
            <span>📍 {{ task.location }}</span>
            <span>⏰ {{ task.time }}</span>
          </div>
          <div class="task-actions">
            <button class="btn-accept" v-if="task.status === 'pending'">接受任务</button>
            <button class="btn-complete" v-if="task.status === 'accepted'">完成任务</button>
          </div>
        </div>
      </div>
    </main>
    
    <footer class="mobile-footer">
      <div class="footer-nav">
        <button class="footer-btn active">
          <span>📋</span>
          <span>任务</span>
        </button>
        <button class="footer-btn">
          <span>📊</span>
          <span>统计</span>
        </button>
        <button class="footer-btn">
          <span>👤</span>
          <span>我的</span>
        </button>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const showMenu = ref(false)

const tasks = ref([
  {
    id: 1,
    title: '配送任务 #001',
    description: '将包裹从仓库A配送至客户B',
    location: '北京市朝阳区',
    time: '14:30',
    status: 'pending',
    statusText: '待接受'
  },
  {
    id: 2,
    title: '调度任务 #002',
    description: '安排车辆前往指定地点接货',
    location: '上海市浦东新区',
    time: '16:00',
    status: 'accepted',
    statusText: '进行中'
  }
])

const refresh = () => {
  // 刷新任务列表
  console.log('刷新任务列表')
}
</script>

<style scoped>
.mobile-app {
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.mobile-header {
  background: #2c3e50;
  color: white;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.mobile-header h1 {
  margin: 0;
  font-size: 1.2rem;
}

.header-actions {
  display: flex;
  gap: 0.5rem;
}

.icon-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.2rem;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 4px;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mobile-nav {
  background: white;
  border-bottom: 1px solid #e1e8ed;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-item {
  color: #2c3e50;
  text-decoration: none;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.nav-item:hover {
  background: #f8f9fa;
}

.mobile-main {
  flex: 1;
  padding: 1rem;
}

.task-list h2 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

.task-item {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.task-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 1rem;
}

.task-status {
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.task-status.pending {
  background: #fff3cd;
  color: #856404;
}

.task-status.accepted {
  background: #d1ecf1;
  color: #0c5460;
}

.task-desc {
  color: #7f8c8d;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.task-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  color: #95a5a6;
}

.task-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-accept, .btn-complete {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-accept {
  background: #27ae60;
  color: white;
}

.btn-accept:hover {
  background: #229954;
}

.btn-complete {
  background: #3498db;
  color: white;
}

.btn-complete:hover {
  background: #2980b9;
}

.mobile-footer {
  background: white;
  border-top: 1px solid #e1e8ed;
  padding: 0.5rem;
}

.footer-nav {
  display: flex;
  justify-content: space-around;
}

.footer-btn {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  cursor: pointer;
  color: #7f8c8d;
  transition: color 0.3s;
}

.footer-btn.active {
  color: #667eea;
}

.footer-btn span:first-child {
  font-size: 1.2rem;
}

.footer-btn span:last-child {
  font-size: 0.8rem;
}
</style> 